<template>
    <div>
        <el-button type="primary" @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading" style="display:none"></el-button>
        <el-form :inline="true" class="demo-form-inline">
			 <span @click="backList()" class="backuy"><i class="el-icon-back"></i></span>
                    <el-form-item label="应用类型:">
                        <span>{{currentDetailInfo.contestTypeStr}}</span>
                    </el-form-item>
                    <el-form-item label="应用面信息:">
                        <span v-show="currentDetailInfo.h">H:{{currentDetailInfo.h}}m  &nbsp; </span>
                        <span v-show="currentDetailInfo.w">W:{{currentDetailInfo.w}}m &nbsp; </span>
                        <span v-show="currentDetailInfo.d">D:{{currentDetailInfo.db}}m ~ {{currentDetailInfo.d}}m &nbsp; </span>
                        <span v-show="currentDetailInfo.w1">W1:{{currentDetailInfo.w1}}m &nbsp; </span>
                        <span v-show="currentDetailInfo.w2">W2:{{currentDetailInfo.w2}}m &nbsp; </span>
                    </el-form-item>
                    <el-form-item>
                        <span>{{colorFlag == 1 ? '单白' : '彩色'}}</span>
                    </el-form-item>
                    
                    <el-form-item label="参考项:">
                        <el-select v-model="chooseEchatType" multiple collapse-tags @change="initData">
                            <el-option v-for="item in echatTypeList" :key="item.value" :label="item.name" :value="item.value">{{item.name}}</el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                
        <div style="height:690px;width:100%;margin: 0;overflow-x: auto;overflow-y:hidden;">
    <div style="width:2000px">
            <div id="echarts_power" style="float: left;width:400px;height:680px;"></div>
            <div id="echarts_brightnessAvg" style="float: left;width:400px;height:680px;"></div>
            <div id="echarts_brightnessMax" style="float: left;width:400px;height:680px;"></div>
            <div id="echarts_brightnessMin" style="float: left;width:400px;height:680px;"></div>
            <div id="echarts_evenness" style="float: left;width:400px;height:680px;"></div>
        </div>
        </div>

		<!-- <div>
			<span v-for="item in dataTable.detectionList" style="background:#ccc;margin:10px">{{item.posCode}}</span>
		</div> -->
    </div>
</template>

<script>
Array.prototype.map = function(fn, thisObj) {
  var scope = thisObj || window;
  var a = [];
  for ( var i=0, j=this.length; i < j; ++i ) {
    a.push(fn.call(scope, this[i], i, this));
  }
  return a;
};
export default {
  name: 'hello',
  data () {
    return {
      fullscreenLoading:false,
		dataTable:[],
		currentDetailInfo:{},
		ids:'',
        echatTypeList : [
                { value: '1', name: '参考值'},
                { value: '2', name: '平均值'},
                { value: '3', name: '推荐·低'},
                { value: '4', name: '推荐·中'},
                { value: '5', name: '推荐·高'}],
        chooseEchatType:['1','2','3','4','5']
    }
  },
  props:['colorFlag','contestId','contestTypeStr'],
  mounted(){

  },
  methods: {
	openFullScreen1() {
    	this.fullscreenLoading = true;
	},
	getRandomColor(){
		return '#'+'0123456789abcdef'.split('').map(function(v,i,a){
    	return i>5 ? null : a[Math.floor(Math.random()*16)] }).join('');
	},	
    generateArr(length,value){
        var dataArr = new Array(length);
        for(var i=0;i<dataArr.length;i++){
            dataArr[i] =value;
        }
        return dataArr;
    },
    backList(){
        this.$emit('backDetail');
	},
	setContestDetetionIds(ids,request){
		this.ids = ids
		this.currentDetailInfo = request
	},
    initData(){
      this.openFullScreen1()
		var echarts_power = document.getElementById("echarts_power")
		// echarts_power.style.width=window.innerWidth+'px';
		var myChartPower = this.$echarts.init(echarts_power);
		
		var echarts_brightnessAvg = document.getElementById("echarts_brightnessAvg")
		// echarts_brightnessAvg.style.width=window.innerWidth+'px';
		var myChartBrightnessAvg = this.$echarts.init(echarts_brightnessAvg);
		
		var echarts_brightnessMax = document.getElementById("echarts_brightnessMax")
		// echarts_brightnessMax.style.width=window.innerWidth+'px';
		var myChartBrightnessMax = this.$echarts.init(echarts_brightnessMax);
		
		var echarts_brightnessMin = document.getElementById("echarts_brightnessMin")
		// echarts_brightnessMin.style.width=window.innerWidth+'px';
		var myChartBrightnessMin = this.$echarts.init(echarts_brightnessMin);
		
		var echarts_evenness = document.getElementById("echarts_evenness")
		// echarts_evenness.style.width=window.innerWidth+'px';
        var myChartEvenness = this.$echarts.init(echarts_evenness);
		
        var xAxisData =[];

        var powerColumnData =[];
        var powerAssistData =[];

        var brightnessColumnData =[];
        var brightnessAssistData =[];

        var brightnessMaxColumnData =[];
        var brightnessMaxAssistData =[];

        var brightnessMinColumnData =[];
        var brightnessMinAssistData =[];

        var evennessColumnData =[];
        var evennessAssistData =[];

		var series =[];
        var brightnessAvgSeries =[];
        var brightnessMaxSeries =[];
        var brightnessMinSeries =[];
        var evennessSeries =[];


		var refTypeStr = '1,2,3,4,5' 
        var temp = ''
        for(var i =0;i<this.chooseEchatType.length;i++){
            temp += this.chooseEchatType[i] + ","
        }
        refTypeStr = temp.substring(0,temp.length-1)
		
		var params = {
			detetionIds:this.ids,
			refTypeStr:refTypeStr
		}
		let self  = this
        this.$http.postQuery('/api/contestStatistics/contestIndexForSupplierJson/'+this.colorFlag+'/'+this.contestId,params,function(res){
			var data = res.data
          self.fullscreenLoading = false;
			self.dataTable = res.data
			var length = data.indexList.length;

				for(var i=0 ;i<data.indexList.length;i++){
					var contestIndexRef = data.indexList[i];
					xAxisData.push(contestIndexRef.refType);
					powerColumnData.push(contestIndexRef.power);
					powerAssistData.push(0);
					
					brightnessColumnData.push(contestIndexRef.brightnessAvgMax-contestIndexRef.brightnessAvgMin);
					brightnessAssistData.push(contestIndexRef.brightnessAvgMin);
					
					brightnessMaxColumnData.push(contestIndexRef.brightnessMax);
					brightnessMaxAssistData.push(0);
					
					brightnessMinColumnData.push(contestIndexRef.brightnessAvgMax-contestIndexRef.brightnessMin);
					brightnessMinAssistData.push(contestIndexRef.brightnessMin);
					console.log(contestIndexRef.evenness)
					if(contestIndexRef.evenness != null){
						evennessColumnData.push(1-contestIndexRef.evenness);
						evennessAssistData.push(contestIndexRef.evenness );
					}else{
						evennessColumnData.push(0);
						evennessAssistData.push(0);
					}
					
                }
                
				series.push({
				    name: '辅助',
				    type: 'bar',
				    stack:  '总量',
				    itemStyle: {
				        normal: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        },
				        emphasis: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        }
				    },
				    data: powerAssistData
				},{
				    name: '',
				    type: 'bar',
				    stack: '总量',
				  /*   label: {
				        normal: {
				            show: true,
				            position: 'inside'
				        }
				    }, */
				    itemStyle: {
				        normal: {
				            color: '#ED7D31'
				        }
				    },
				    data:powerColumnData
				});
				console.log("series")
				console.log(series)
				
				
				//平均亮度
				brightnessAvgSeries.push({
				    name: '辅助',
				    type: 'bar',
				    stack:  '总量',
				    itemStyle: {
				        normal: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        },
				        emphasis: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        }
				    },
				    data: brightnessAssistData
				},{
				    name: '',
				    type: 'bar',
				    stack: '总量',
				 /*    label: {
				        normal: {
				            show: true,
				            position: 'inside'
				        }
				    }, */
				    itemStyle: {
				        normal: {
				            color: '#ED7D31'
				        }
				    },
				    data:brightnessColumnData
				});
				
				//最大亮度
				brightnessMaxSeries.push({
				    name: '辅助',
				    type: 'bar',
				    stack:  '总量',
				    itemStyle: {
				        normal: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        },
				        emphasis: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        }
				    },
				    data: brightnessMaxAssistData
				},{
				    name: '',
				    type: 'bar',
				    stack: '总量',
				/*     label: {
				        normal: {
				            show: true,
				            position: 'inside'
				        }
				    }, */
				    itemStyle: {
				        normal: {
				            color: '#ED7D31'
				        }
				    },
				    data:brightnessMaxColumnData
				});
				
				
				//最小亮度
				brightnessMinSeries.push({
				    name: '辅助',
				    type: 'bar',
				    stack:  '总量',
				    itemStyle: {
				        normal: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        },
				        emphasis: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        }
				    },
				    data: brightnessMinAssistData
				},{
				    name: '',
				    type: 'bar',
				    stack: '总量',
				 /*    label: {
				        normal: {
				            show: true,
				            position: 'inside'
				        }
				    }, */
				    itemStyle: {
				        normal: {
				            color: '#ED7D31'
				        }
				    },
				    data:brightnessMinColumnData
				});
				
				// 均匀度
				evennessSeries.push({
				    name: '辅助',
				    type: 'bar',
				    stack:  '总量',
				    itemStyle: {
				        normal: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        },
				        emphasis: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        }
				    },
				    data: evennessAssistData
				},{
				    name: '',
				    type: 'bar',
				    stack: '总量',
				 /*    label: {
				        normal: {
				            show: true,
				            position: 'inside'
				        }
				    }, */
				    itemStyle: {
				        normal: {
				            color: '#ED7D31'
				        }
				    },
				    data:evennessColumnData
				});
				if(data.detectionList){
					
					for(var i=0 ;i<data.detectionList.length;i++){
						var currentColor = self.getRandomColor()
						var objectPower ={type: 'line',smooth: true,color:currentColor};
						var objectBrightnessAvg ={type: 'line',smooth: true,color:currentColor};
						var objectbrightnessMax ={type: 'line',smooth: true,color:currentColor};
						var objectBrightnessMin ={type: 'line',smooth: true,color:currentColor};
						var objectEvenness ={type: 'line',smooth: true,color:currentColor};
						
						var detection = data.detectionList[i];
						objectPower.name= detection.posCode;
						objectPower.data = self.generateArr(length,detection.power);
						console.log("objectPower")
						console.log(objectPower)
						series.push(objectPower);
						console.log(series)
						
						objectBrightnessAvg.name= detection.posCode;
						objectBrightnessAvg.data = self.generateArr(length,detection.lightnessAve);
						brightnessAvgSeries.push(objectBrightnessAvg);
						
						objectbrightnessMax.name= detection.posCode;
						objectbrightnessMax.data = self.generateArr(length,detection.lightnessMax);
						brightnessMaxSeries.push(objectbrightnessMax);
						
						objectBrightnessMin.name= detection.posCode;
						objectBrightnessMin.data = self.generateArr(length,detection.lightness);
						console.log("detection.lightness")
						console.log(detection.lightness)
						brightnessMinSeries.push(objectBrightnessMin);
						
						
						objectEvenness.name= detection.posCode;
						objectEvenness.data = self.generateArr(length,detection.evenness);
						console.log("detection.evenness")
						console.log(detection.evenness)
						evennessSeries.push(objectEvenness);
						
					}
                }
                
				var option = {
						 backgroundColor: '#f6f6fd',
						  textStyle: {
		                      color: 'black',
		                      fontSize: 16
		                  },
					    title: {
					        text: '功率(w)',
					        left:'center',
					        textStyle:{ //设置主标题风格
					        	color:'black'//设置主标题字体颜色
					        	},				       
					       // sublink: 'http://e.weibo.com/1341556070/AjQH99che'
					    },
					     tooltip : {
					        trigger: 'axis',
					        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
							}
							,
					         formatter: function (params) {
					        	 var str ='<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
					        		+ params[1].marker + params[1].name + ' ' + params[1].value
			                          + '</div>';
			                          
					        	 for(var i=2;i<params.length;i++){
					        		 var obj = params[i];
					        		 str += obj.marker +obj.seriesName + '：' + obj.value + '<br>'
					        	 }
					        	return str;
					        } 
					    }, 
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
					    xAxis: {
					        type : 'category',
					        splitLine: {show:false},
					        data : xAxisData,
					        nameTextStyle: {
			                      color: 'black',
			                      fontSize: 14
			                  },
					    },
					    yAxis: {
					        type : 'value'
					    },
					    series: series
					};


				
				
			
				// console.log(JSON.stringify(option))
				var optionBrightnessAvg = {
						backgroundColor: '#f6f6fd',
					    title: {
					        text: '平均亮度(cd/㎡)',
					        left:'center',
					        textStyle:{ //设置主标题风格
					        	color:'black'//设置主标题字体颜色
					        	},	
					        //subtext: 'From ExcelHome',
					       // sublink: 'http://e.weibo.com/1341556070/AjQH99che'
					    },
					    textStyle: {
		                      color: 'black',
		                      fontSize: 16
		                  },
					     tooltip : {
					        trigger: 'axis',
					        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					        },
					        formatter: function (params) {
					        	var tar0 = params[0];
					            var tar = params[1];
					           var maxValue = tar0.value +tar.value;
					        	 var str ='<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
					        		+ tar.marker + tar.name + ' ' +tar0.value + '~'+maxValue
			                          + '</div>';
			                          
					        	 for(var i=2;i<params.length;i++){
					        		 var obj = params[i];
					        		 str += obj.marker +obj.seriesName + '：' + obj.value + '<br>'
					        	 }
					        	return str;
					        } 
					    }, 
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
					    xAxis: {
					        type : 'category',
					        splitLine: {show:false},
					        data : xAxisData
					    },
					    yAxis: {
					        type : 'value'
					    },
					    series: brightnessAvgSeries
					};
					
					
				var optionBrightnessMax = {
					    backgroundColor: '#f6f6fd',
					    textStyle: {
		                      color: 'black',
		                      fontSize: 16
		                  },
					    title: {
					        text: '最大亮度(cd/㎡)',
					        left:'center',
					        textStyle:{ //设置主标题风格
					        	color:'black'//设置主标题字体颜色
					        	},	
					        //subtext: 'From ExcelHome',
					       // sublink: 'http://e.weibo.com/1341556070/AjQH99che'
					    },
					     tooltip : {
					        trigger: 'axis',
					        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					        },
					        formatter: function (params) {
					        	 var str ='<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
					        		+ params[1].marker + params[1].name + ' ' +params[1].value
			                          + '</div>';
			                          
					        	 for(var i=2;i<params.length;i++){
					        		 var obj = params[i];
					        		 str += obj.marker +obj.seriesName + '：' + obj.value + '<br>'
					        	 }
					        	return str;
					        } 
					    }, 
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
					    xAxis: {
					        type : 'category',
					        splitLine: {show:false},
					        data : xAxisData
					    },
					    yAxis: {
					        type : 'value'
					    },
					    series: brightnessMaxSeries
					};
					
				var optionBrightnessMin = {
						backgroundColor: '#f6f6fd',
						  textStyle: {
		                      color: 'black',
		                      fontSize: 16
		                  },
					    title: {
					        text: '最小亮度(cd/㎡)',
					        left:'center',
					        textStyle:{ //设置主标题风格
					        	color:'black'//设置主标题字体颜色
					        	},	
					        //subtext: 'From ExcelHome',
					       // sublink: 'http://e.weibo.com/1341556070/AjQH99che'
					    },
					     tooltip : {
					        trigger: 'axis',
					        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					        },
					        formatter: function (params) {
					        	var tar0 = params[0];
					            var tar = params[1];
					           var maxValue = tar0.value +tar.value;
					        	 var str ='<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
					        		+ tar.marker + tar.name + ' ' +tar0.value + '~'+maxValue
			                          + '</div>';
			                          
					        	 for(var i=2;i<params.length;i++){
					        		 var obj = params[i];
					        		 str += obj.marker +obj.seriesName + '：' + obj.value + '<br>'
					        	 }
					        	return str;
					        } 
					    }, 
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
					    xAxis: {
					        type : 'category',
					        splitLine: {show:false},
					        data : xAxisData
					    },
					    yAxis: {
					        type : 'value'
					    },
					    series: brightnessMinSeries
					};
					
				var optionEvenness = {
						backgroundColor: '#f6f6fd',
						  textStyle: {
		                      color: 'black',
		                      fontSize: 16
		                  },
					    title: {
					        text: '均匀度',
					        left:'center',
					        textStyle:{ //设置主标题风格
					        	color:'black'//设置主标题字体颜色
					        	},	
					        //subtext: 'From ExcelHome',
					       // sublink: 'http://e.weibo.com/1341556070/AjQH99che'
					    },
					     tooltip : {
					        trigger: 'axis',
					        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					        },
					        formatter: function (params) {
					        	var tar0 = params[0];
					            var tar = params[1];
					           var maxValue = tar0.value +tar.value;
					        	 var str ='<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
					        		+ tar.marker + tar.name + ' ' +tar0.value + '~'+maxValue
			                          + '</div>';
			                          
					        	 for(var i=2;i<params.length;i++){
					        		 var obj = params[i];
					        		 str += obj.marker +obj.seriesName + '：' + obj.value + '<br>'
					        	 }
					        	return str;
					        } 
					    }, 
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
					    xAxis: {
					        type : 'category',
					        splitLine: {show:false},
					        data : xAxisData
					    },
					    yAxis: {
					        type : 'value'
					    },
					    series: evennessSeries
					};
				myChartPower.clear();
				myChartBrightnessAvg.clear();
				myChartBrightnessMax.clear();
				myChartBrightnessMin.clear();
				myChartEvenness.clear();
				myChartPower.setOption(option);
				myChartBrightnessAvg.setOption(optionBrightnessAvg);
				myChartBrightnessMax.setOption(optionBrightnessMax);
				myChartBrightnessMin.setOption(optionBrightnessMin);
				myChartEvenness.setOption(optionEvenness);
        })
    }
  }
}
</script>
<style>
    .top{
        margin-bottom: 20px;
        
    }
    .button{
            background-color: #5b65a1;
            border-radius: 4px;
            color: #fff;
            padding: 12px 20px;
            font-size: 14px;
            border: none;
            margin-right: 20px;
            cursor: pointer;
        }
    </style>